<!--
 * @Author: 颜礼田 2564217790@qq.com
 * @Date: 2024-08-26 10:41:26
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-27 10:40:37
 * @FilePath: /webServerAdmin/src/views/system/accountManage/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-box">
    <ProTable ref="proTableRef" :request-api="fetchUserList" :columns="columns">
      <template #tableHeader>
        <div>
          <el-button v-auth="'System.User.AddUser'" type="primary" @click="open">新增</el-button>
        </div>
      </template>
    </ProTable>
    <Edit ref="editRef" @success="refresh"></Edit>
  </div>
</template>

<script setup lang="tsx" name="accountManage">
import ProTable from "@/components/ProTable/index.vue";
import { fetchUserList, removeUser } from "@/api/modules/user";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { ref } from "vue";
import { isNotEmpty } from "@/utils/isHelper";
import Edit from "./components/edit.vue";
import { RefOpenEventProps } from "@/typings/interface";
import { UserSchema } from "@/schema";
import { ElMessageBox, ElNotification } from "element-plus";
import { ResultEnum } from "@/enums/httpEnum";
import { useFile } from "@/hooks/useFile";

const proTableRef = ref<ProTableInstance>();
const editRef = ref<RefOpenEventProps<UserSchema>>();

function open() {
  editRef.value?.open();
}

function remove(row) {
  ElMessageBox.confirm("提示", { type: "error", message: "是否删除当前数据？" })
    .then(() => {
      if (row?.id) {
        removeUser({ id: row?.id }).then(r => {
          const { code, message } = r;
          if (code == ResultEnum.SUCCESS) {
            ElNotification.success("删除成功！");
            refresh();
          } else {
            ElNotification.error(message);
          }
        });
      }
    })
    .catch(err => {
      console.error(err);
    });
}

function edit(row) {
  editRef.value?.open(row);
}

const columns: Array<ColumnProps> = [
  { label: "序号", width: 80, type: "index", fixed: "left" },
  {
    label: "头像",
    prop: "avatar",
    render({ row }) {
      return (
        <el-image
          src={useFile(row.avatar)}
          style="width:40px;height:40px"
          preview-src-list={[useFile(row.avatar)]}
          fit="cover"
          z-index={9999}
          preview-teleported
        ></el-image>
      );
    }
  },
  { label: "用户名", prop: "userName", search: { el: "input" } },
  { label: "手机号", prop: "mobile", search: { el: "input" } },
  { label: "身份证号", prop: "idCardNo", search: { el: "input" } },
  { label: "邮箱", prop: "email", search: { el: "input" } },
  {
    label: "角色",
    prop: "role",
    render({ row }) {
      if (isNotEmpty(row.role)) {
        return (
          <>
            {row.role?.map(ele => {
              return <el-tag>{ele.roleName}</el-tag>;
            })}
          </>
        );
      } else {
        return "--";
      }
    }
  },
  { label: "部门", prop: "dept.deptName" },
  {
    label: "操作",
    prop: "action",
    render({ row }) {
      return (
        <>
          <el-button type="primary" link v-auth={"System.User.EditUser"} onClick={() => edit(row)}>
            编辑
          </el-button>
          <el-button type="danger" link v-auth={"System.User.RemoveUser"} onClick={() => remove(row)}>
            删除
          </el-button>
        </>
      );
    }
  }
];

function refresh() {
  proTableRef.value?.getTableList();
}
</script>
